<!--
- Author:  LiShibin.
- Date:    2017/8/2 0002.
- File:    index.
-->
<template>
  <div class="">
    <!--<span @click="" class="close"><i class="iconfont icon-guanbi"></i></span>-->
    <div class="Topmenu">
      <!--<i class="iconfont icon-shezhi6"><a href=""></a></i>-->
      <h1>登陆</h1>
      <span></span>
    </div>
    <div class="login_dl">
      <div class="login_ipt1">
        <i class="iconfont icon-denglu_shoujihao1"></i>
        <input type="tel" v-model="mobile" placeholder="输入手机号码">
      </div>
      <div class="login_ipt1">
        <i class="iconfont icon-wangjimima_yanzhengma"></i>
        <input type="password" v-model="pwd" placeholder="输入密码">
      </div>
      <p>
        <span @click="gotoModifyPwd" style="float: left;color: #cdcdcd;">忘记密码?</span>
        <span @click="gotoRegister">快速注册</span>
      </p>
    </div>
    <div class="login_btn1">
      <span @click="login">登录</span>
      <span @click="gotoLoginMessage">手机短信验证登录</span>
    </div>
    <div class="qtfs" style="position: relative;margin-top: 2rem">
      <p>其他方式登录</p>
      <span @click="wxLogin"><img src="../../assets/images/weixin.png"></span>
    </div>

    <!--<div class="login_cont">-->
      <!--<div class="login_ipt">-->
        <!--<input type="tel" placeholder="手机号码" v-model="mobile">-->
      <!--</div>-->
      <!--<div class="login_ipt">-->
        <!--<input type="tel" placeholder="密码" v-model="pwd"><label>-->
      <!--</label>-->
      <!--</div>-->
      <!--<div class="login_btn">-->
        <!--<button @click="login">密码登录</button>-->
      <!--</div>-->
      <!--<div class="login_tit"><span class="title">其他登录方式</span></div>-->
      <!--<div class="login_other">-->
        <!--<ul class="clear">-->
          <!--<li>-->
            <!--<a href="javascript:void(0)" @click="wxLogin"><i class="iconfont icon-iconfontweixin2"></i><span>微信登录</span></a>-->
          <!--</li>-->
          <!--<li>-->
            <!--<a href="javascript:void(0)" @click="gotoLoginMessage"><i class="iconfont icon-mima"></i><span>验证码登录</span></a>-->
          <!--</li>-->
        <!--</ul>-->
      <!--</div>-->
    <!--</div>-->
  </div>
</template>

<script>
  import messageCode from '../../components/message-code.vue'
  import * as requests from '../../request'

  export default{
    beforeRouteEnter (to, from, next) {
      // if (!document.body.classList.contains('login_bg')) {
      //   document.body.classList.add('login_bg')
      // }
      next()
    },
    beforeRouteLeave  (to, from, next) {
      // if (to.name != 'login-password' && to.name != 'login-bind') {
      //   document.body.classList.remove('login_bg')
      // }
      next()
    },
    components: {
      'message-code': messageCode
    },
    data() {
      return {
        mobile: '',
        pwd: ''
      }
    },
    methods: {
      gotoLoginMessage() {
        this.$router.replace({name: 'login-message'})
      },
      gotoRegister() {
        this.$router.push({name: 'login-bind'})
      },
      gotoModifyPwd() {
        console.log('modify pwd')
        this.$router.push({name: 'setting-password'})
      },
      login() {
        if (!this.$validator.phone(this.mobile)) {
          this.$toast('请输入正确的手机号')
          return
        }
        if (this.pwd == '') {
          this.$toast('请输入密码')
          return
        }
        this.$request.loginByPwd(this.mobile, this.pwd).then(data => {
          this.$storage.setKey(data.key) // 测试用
          this.$router.replace({name: 'home'})
        }).catch(e => {
          this.$toast('登录失败:' + e.msg)
        })
      },
      wxLogin() {
        let wx = window.api.require('wx')
        let _this = this
        wx.auth({
          apiKey: ''
        }, function(ret, err) {
          console.log(ret.code)
          if (ret.status) {
            wx.getToken({
              apiKey: '',
              apiSecret: '',
              code: ret.code
            }, function(ret, err) {
              if (ret.status) {
                wx.getUserInfo({
                  accessToken: ret.accessToken,
                  openId: ret.openId
                }, function(ret, err) {
                  if (ret.status) {
                    console.log('open:' + ret.openid)
                    console.log('union:' + ret.unionid)
                    requests.getKeyByUnionId(ret.unionid).then(data => {
                      console.log('根据unionid获取用户信息', data)
                      if (data.key) {
                        _this.$storage.setKey(data.key)
                        _this.$router.replace({name: 'home'})
                      } else {
                        _this.$toast('请现在微信端登录')
                      }
                    })
                  } else {
                  }
                })
              } else {
                console.log('auth:' + err.code)
              }
            })
          } else {
            console.log('token:' + err.code)
          }
        })
        // this.$native.weixinLogin().then(wxInfo => {
        //   console.log('微信登录成功', wxInfo)
        //   this.wxInfo = wxInfo
        //   this.$toast('dsdsf')
        //   this.$request.getKeyByUnionId(wxInfo.unionid).then(data => {
        //     console.log('根据unionid获取用户信息', data)
        //     if (data.key) {
        //       this.$storage.setKey(data.key)
        //       this.$router.replace({name: 'home'})
        //     } else {
        //       this.$router.replace({name: 'login-bind'})
        //     }
        //   })
        // }).catch(e => {
        //   this.$toast('微信登录失败:' + e.msg)
        // })
      }
    }
  }
</script>

<style>

</style>
